import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import store, { RootState } from "../../store";
import { fetchData } from "../../store/home/homeReducer";
import "./style.css";
import axios from "axios";

const Index: React.FC = () => {
  const data = useSelector((state: RootState) => state.home.data);
  const loading = useSelector((state: RootState) => state.home.loading);
  const error = useSelector((state: RootState) => state.home.error);

  useEffect(() => {
    store.dispatch(fetchData());
  }, []);

  if (loading) {
    return <div>数据加载中...</div>;
  }

  if (error) {
    return <div>网站报错： {error}</div>;
  }

  return (
    <div className="home">
      {data.map((v, i) => {
        return (
          <dl key={v.id}>
            <dt>
              <img src={v.url} alt="" />
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.word}</p>
            </dd>
          </dl>
        );
      })}
    </div>
  );
};

export default Index;
